<template>
	<div id="bannePage">
		<shyt-table
			ref="orgBanneTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:pager-config="pageConfig"
			:toolbar-config="toolbarConfig"
			:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<template #releaseFlag="{ row }">
				<span>{{ row.releaseFlag == '0' ? '是' : '否' }}</span>
			</template>
			<template #releaseTime="{ row }">
				<span>{{ row.releaseTime | formatDateTime }}</span>
			</template>
			<template #effectiveStartTime="{ row }">
				<span>{{ row.effectiveStartTime | formatDateTime }}</span>
			</template>
			<template #effectiveEndTime="{ row }">
				<span>{{ row.effectiveEndTime | formatDateTime }}</span>
			</template>
			<template #banneHref="{ row }">
				<el-image
					style="width: 45px; height: 45px"
					:src="row.banneHref"
					fit="cover"
					:preview-src-list="row.banneHrefList"
				>
				</el-image>
			</template>
			<template #articleInformationId="{ row }">
				<span>{{ articleInfoNameFun(row.articleInformationId) }}</span>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="orgNameOrInputCode"
					class="dept_input"
					placeholder="请输入医院名称/拼音码"
					size="medium"
					clearable
				></el-input>
				<el-button type="primary" size="small" @click="handlerSeach">
					查询
				</el-button>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button
					type="text"
					size="small"
					:datalist="row"
					@click="handlerEditRow(row)"
				>
					编辑
				</el-button>
				<el-button type="text" size="small" @click="deldectDept(row)">
					删除
				</el-button>
			</template>
		</shyt-table>
		<banneDialog
			ref="banneDialog"
			:visible.sync="dialogVisible"
			:title="dialogTitle"
			:banne-data.sync="banneData"
			:dialog-type="dialogType"
			:article-list="articleList"
			@submit="handlerSubmit"
		/>
	</div>
</template>
<script>
import banneDialog from './components/bannerDialog'
import { getArticleList } from '@/http/article'
import {
	getbannePageList,
	banneInsert,
	banneUpdate,
	banneDelete,
} from '@/http/banne'
import { mapGetters } from 'vuex'
export default {
	name: 'BannePage',
	components: { banneDialog },
	data() {
		return {
			orgNameOrInputCode: null,
			orgList: [],
			articleList: [],
			loading: false,
			dialogVisible: false,
			dialogTitle: '',
			banneData: {
				name: '',
				banneHref: '',
				articleInformationId: '',
				releaseFlag: '1',
				effectiveStartTime: null,
				effectiveEndTime: null,
				startEndTimes: [],
			},
			dialogType: '',
			//输入框校验
			rules: {},
			columns: [
				{
					field: 'orgName',
					title: '医院',
				},
				{
					field: 'deptName',
					title: '科室',
				},
				{
					field: 'doctorName',
					title: '医生',
				},
				{
					field: 'name',
					title: 'banne名称',
				},
				{
					field: 'banneHref',
					title: '图片地址',
					slots: { default: 'banneHref' },
				},
				{
					field: 'articleInformationId',
					title: '文章',
					slots: { default: 'articleInformationId' },
				},
				{
					field: 'releaseFlag',
					title: '是否发布',
					slots: { default: 'releaseFlag' },
				},
				{
					field: 'releaseTime',
					title: '发布时间',
					slots: { default: 'releaseTime' },
				},
				{
					field: 'effectiveStartTime',
					title: '开始有效时间',
					slots: { default: 'effectiveStartTime' },
				},
				{
					field: 'effectiveEndTime',
					title: '结束有效时间',
					slots: { default: 'effectiveEndTime' },
				},
				{
					field: 'releaseCompany',
					title: '发布单位',
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			tableData: [],
			// 按钮
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			// 分页
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
		}
	},
	computed: {
		...mapGetters(['userMsg']),
	},
	created() {
		this.getArticleList()
		this.handlerSeach()
	},
	methods: {
		articleInfoNameFun(val) {
			var article = this.articleList.find(info => info.id == val)
			if (article) {
				return article.title
			}
			return '-'
		},
		getArticleList() {
			getArticleList({ articleType: '0', publish: '0', delFlag: '0' }).then(
				({ data }) => {
					this.articleList = data.data
				},
			)
		},
		isFlagFun(val) {
			return val == '0' ? '是' : '否'
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
			this.handlerSeach()
		},
		// 编辑
		handlerEditRow(row) {
			this.dialogTitle = 'banne编辑'
			this.dialogType = '2'
			let obj = {}
			obj = Object.assign({}, row)
			obj.startEndTimes = []
			if (row.effectiveStartTime && row.effectiveEndTime) {
				obj.startEndTimes.push(row.effectiveStartTime)
				obj.startEndTimes.push(row.effectiveEndTime)
			}
			this.banneData = this._.cloneDeep(obj)
			this.dialogVisible = true
		},
		// 删除
		deldectDept(row) {
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					banneDelete(row).then(({ data }) => {
						if (data.head.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							})
							this.handlerSeach()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 新增
		handlerAddClick() {
			this.dialogTitle = 'banne新增'
			this.dialogType = '1'
			this.dialogVisible = true
		},
		// 查询
		handlerSeach() {
			let param = {
				pageNum: this.pageConfig.currentPage,
				pageSize: this.pageConfig.pageSize,
				delFlag: '0',
				orgNameOrInputCode: this.orgNameOrInputCode
					? this.orgNameOrInputCode.toUpperCase()
					: null,
			}
			getbannePageList(param).then(({ data }) => {
				this.tableData = data.data.records
				this.tableData.forEach(info => {
					info.banneHrefList = []
					info.banneHrefList.push(info.banneHref)
				})
				this.pageConfig.total = data.data.total
			})
		},
		handlerSubmit(formData, type) {
			let res = { ...formData }
			if (type == '1') {
				banneInsert(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新增成功')
						this.dialogVisible = false
						this.handlerSeach()
					}
				})
			} else {
				banneUpdate(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.dialogVisible = false
						this.handlerSeach()
					}
				})
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.dept_input {
	width: 200px;
}
</style>
